Welcome to the 93th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. Why doesn't React.useEffect run on React server-side renders (SSR) for example when using it inside a Next.js application? (3 min read): https://codewithhugo.com/react-useeffect-ssr/

2. How I started believing in Cycle Time over Estimation (6 min read): https://www.norberhuis.nl/how-i-started-believing-in-cycle-time-over-estimation

3. The SSPL is Not an Open Source License (3 min read): https://opensource.org/node/1099

4. The Danger of “Simplicity” (4 min read): https://asthasr.github.io/posts/danger-of-simplicity/

It's your monthly reminder that serverless done right is very affordable. We run a full-stack insurance company, selling four products (home/auto/renters/umbrella). Every environment and developer has his or her own AWS account that is a replica of prod. Here's our bill for July.

https://twitter.com/JoeEmison/status/1298960701097226240/photo/1

— Joe Emison (@JoeEmison) August 27, 2020

Welcome to the 92nd Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "Cypress Scroll Position Assertions" This post goes through approaches to asserting on the scroll position. (4 min read) : https://codewithhugo.com/cypress-scroll-assertions/

2. There Are No Bugs, Just TODOs (8 min read): https://almad.blog/essays/no-bugs-just-todos/

3. Roy Fielding's Misappropriated REST Dissertation (9 min read): https://twobithistory.org/2020/06/28/rest.html

Tweet of the week is @_developit teasing https://github.com/preactjs/wmr back in August

Welcome to the 91st Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "What is the "?." JavaScript/TypeScript operator" In JavaScript and TypeScript, the “?.” operator is called optional chaining. (2 min read) : https://codewithhugo.com/javascript-typescript-optional-chaining/

2. Refactoring optional chaining into a large codebase: lessons learned (8 min read): https://lea.verou.me/2020/06/refactoring-optional-chaining-into-a-large-codebase-lessons-learned/

3. Why you should (almost) always underline your links (4 min read): https://www.tempertemper.net/blog/why-you-should-almost-always-underline-your-links.html

Tweet of the week is a Julia Evans zine about 1:1s:

Welcome to the 90th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 89th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 88th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "An accessible Alpine.js menu toggle" The "Hello World" of JavaScript frameworks and libraries seems to have become the todo app. Here's an accessible menu with Alpine.js instead (3 min read) : https://codewithhugo.com/alpinejs-a11y-menu/

2. Internet performance during the COVID-19 emergency - Cloudflare is watching carefully as Internet traffic patterns around the world alter as people alter their daily lives through home-working, cordon sanitaire, and social distancing. None of these traffic changes raise any concern for us. (5 min read): https://blog.cloudflare.com/recent-trends-in-internet-traffic/

3. [Video] Excalidraw: Cool JS Tricks Behind the Scenes - Christopher Chedeau aka @vjeux at @ReactEurope 2020 (48 min watch): http://www.youtube.com/watch?v=fix2-SynPGE

Tweet of the week is an endorsement of Excalidraw by @_fergarram_:

Welcome to the 87th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "Alpine.js in-depth: listen to JavaScript events using x-on" 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. (2 min read) : https://codewithhugo.com/alpinejs-x-on/

2. How did software get so reliable without proof? (3 min read): https://surfingcomplexity.blog/2020/03/02/how-did-software-get-so-reliable-without-proof/

3. We're not smarter than browsers (3 min read): https://remysharp.com/2020/04/29/were-not-smarter-than-browsers

Tweet of the week is Evan You (@youyuxi) praising Alpine.js for providing a solution to niche use cases Vue is too verbose for.

Welcome to the 86th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 85th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 84th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "Github Pull Request Review: reset viewed files" GitHub Pull Request Review workflow is great. (1 min read) : https://codewithhugo.com/github-review-reset-viewed/

2. Node.js v14: What's New? That's right! Node.js version 14 is here! 🎉 Whether you have upgraded your Node version already or are thinking about doing it soon, let's discuss some of the things that this new version gives us! We'll even chat about older versions and what to expect there in the coming months. (9 min read): https://auth0.com/blog/nodejs-v-14-whats-new/

3. A first look at records and tuples in JavaScript, In this blog post, we take a first look at the ECMAScript proposal “Record & Tuple” (by Robin Ricard and Rick Button). This proposal is about introducing two kinds of compound primitive values to JavaScript: (6 min read): https://2ality.com/2020/05/records-tuples-first-look.html

Tweet of the week is a React iteration (keys) tip from @housecor:

Welcome to the 83rd Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 82nd Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 81st Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 80th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 79th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 78th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "How to Access Alpine.js Magic Properties from inline handlers and function/component methods" Alpine.js magic properties are crucial to leveraging its best features. (5 min read) : https://codewithhugo.com/alpinejs-magic-property-access/

2. On Leaving My Day Job (2 min read): https://calebporzio.com/n-leaving-my-day-job/

3. Being Slow To Criticise (2 min read): https://www.solipsys.co.uk/new/BeingSlowToCriticise.html

Tweet of the week is from Corey Quinn, who for all the snark he aims at AWS, still find it in his heart to say something nice about any AWS team, it's a really good thread:

Welcome to the 77th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 76th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

1. "A guide to Alpine.js component communication" How to share information between Alpine.js components with the $dispatch magic property and the window/document as an event bus. (7 min read) : https://codewithhugo.com/alpinejs-component-communication-event-bus/

2. "Can I store the .git folder outside the files I want tracked?" (1 min read): https://stackoverflow.com/questions/505467/can-i-store-the-git-folder-outside-the-files-i-want-tracked

3. "Things I Learned From a Senior Software Engineer" (19 min read): https://medium.com/better-programming/things-i-learned-from-a-senior-software-engineer-3cf622f3d835

Bonus Post: App Ideas: 17 Web Apps You Can Build To Level Up Your Coding Skills: https://codewithhugo.com/coding-web-app-ideas/

Welcome to the 75th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 74th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enterprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 73rd Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

Welcome to the 72nd Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

1. "Integrating Alpine.js + Pre/Server-rendered content" Alpine.js is a great choice for adding some interactive feature to a server rendered, static or pre-rendered site. (6 min read) : https://codewithhugo.com/alpine-server-pre-render-x-remove/

2. On building a personal brand in tech - Occasionally somebody in the tech world reaches out to me and says “You seem to have a good personal brand, how did you do that?” (10 min read): https://forrestbrazeal.com/2019/09/22/cloud-irregular-on-building-a-personal-brand-in-tech/

3. Microsoft Access: The Database Software That Won’t Die (8 min read): https://medium.com/young-coder/microsoft-access-the-zombie-database-software-that-wont-die-5b09e389c166

Thread by @brianleroux:

Welcome to the 71st Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

I’ve had great success prototyping with Excalidraw for mockups, + for visuals and to input, inject and organise data in a readable format.

Welcome to the 70th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

1. "How to migrate a bunch of HTML pages (Alpine.js Playground) to Eleventy", Alpine.js Playground was recently migrated from custom build scripts & HTML pages to leverage Eleventy. (9 min read): codewithhugo.com/migrate-html-alpinejs-to-eleventy/

2. The Only Type of API Services I'll Use (3 min read): https://www.rdegges.com/2020/the-only-type-of-api-services-ill-use/

3. How (some) good corporate engineering blogs are written (4 min read): https://danluu.com/corp-eng-blogs/

Fun quote/Tweet:

Welcome to the 69th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 books I think are worth your time in the next couple of week,

1. Improve your JavaScript testing game with Jest, I've just launched The Jest Handbook with a 30% launch discount.

2. A Memoir by the Creator of Nike, Shoe Dog, one of my favourite recent reads. It's an old school look at building a business from scratch that still resonates with the modern advice of "doing things that don't scale", overcoming competitive challenges and finding a niche.

3. Secrets and Lies in a Silicon Valley Startup, Bad Blood, which was my beach-side read last summer, it's pretty much the opposite of Shoe Dog, it's a textbook on how not to do things but also a commentary on the thin line startup founders and business owners toe when making promises and ask for forgiveness instead of permission. In this case, there wasn't much in the way of forgiveness for Elizabeth Holmes.

Tweet/recommendation of the week by @mattlemay, watch the documentary "Metallica: Some kind of Monster":

Welcome to the 68th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

1. "Practical Alpine.js: x-data data access & data fetching examples" I feel like I've finally found a lightweight replacement for interactive jQuery or Vanilla JS, see these examples to understand what I mean. (5 min read) : https://codewithhugo.com/alpinejs-x-data-fetching/

2. We did it! How a comment on HackerNews lead to 4 ½ new Unicode characters (1 min read): https://unicodepowersymbol.com/we-did-it-how-a-comment-on-hackernews-lead-to-4-%c2%bd-new-unicode-characters/

3. How containers work: overlayfs (4 min read): https://jvns.ca/blog/2019/11/18/how-containers-work--overlayfs/

A wise thread from Sarah Drasner:

Welcome to the 67th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

1. AlpineJS is well-suited for building widgets and easily creating client-side experiences for websites that are mainly server-side rendered or static. It's perfect for little widgets, here's how to run said widgets inside of a React (3 min read): https://codewithhugo.com/alpine-js-react/

2. A reference to what you should be putting into your HTML head (5 min read): https://htmlhead.dev/

3. A CEO’s Experience Taking the New AWS Cloud Practitioner Exam Online Exam (4 min read): https://www.lastweekinaws.com/blog/a-ceos-experience-taking-the-new-aws-cloud-practitioner-exam-online-exam/

Fun quote/Tweet, words of wisdom on "todo"'s in code by Dan Abramov:

Welcome to the 66th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week, they're around the theme of how to do more of what makes you happy as a software engineer (be that money, more free time, travelling or using tools you enjoy).

1. Salary Negotiation: Make More Money, Be More Valued (23 min): kalzumeus.com/2012/01/23/salary-negotiation/

2. Postgres Handles More Than You Think (3 min read): infoq.com/articles/postgres-handles-more-than-you-think/

3. I made Redux Form, maintained it for 3 years, travelled the globe (5 min read): sourcesort.com/interview/erik-rasmussen-redux-form

Fun quote/Tweet:

Welcome to the 65th Edition of the Code with Hugo newsletter about JavaScript, Node.js & Enteprise patterns.

Here are 3 links I think are worth your time this week,

Here are 3 links I think are worth your time this week,

1. Catalina "Apple cannot check for malicious software" Command Line Fix (2 min read): codewithhugo.com/catalina-permission-command-line-fix/

2. Input elements hold references to their labels (2 min read): stefanjudis.com/today-i-learned/input-elements-hold-references-to-their-labels/

3. The First Non-Bullshit Book About Culture I’ve Read (6 min read): zwischenzugs.com/2019/11/27/the-first-non-bullshit-book-about-culture-ive-read/

Fun quote/Tweet:

https://twitter.com/isotopp/status/1218162310956638209

Welcome to 2020 on Code with Hugo,

Here are 3 links I think are worth your time this week,

1. How I Stopped a Credit Card Thief From Ripping Off 3,537 People – and Saved Our Nonprofit in the Process (12 min read): https://www.freecodecamp.org/news/stopping-credit-card-fraud-and-saving-our-nonprofit/

2. Goodbye, Clean Code (5 min read): https://overreacted.io/goodbye-clean-code/

3. Understand JWT in 3 minutes (3 min read): https://tahazsh.com/understand-jwt-in-3-minutes

Here's a 2020 Web Tech Predictions Thread by Kyle Matthews.

Last week I had a call with Quincy Larson of freeCodeCamp (to be onboarded as an author).

I’m a massive fan of the work he’s done with limited resources, we got to chatting and realised that we’re both trying to solve the “content is out there but not in the right format” problem.

He showed me his newsletter template, and I’ve shamelessly decided to copy it. It goes as follows:

Here are 3 links I think are worth your time this week,

The Jest Handbook is now ready for preorders.

If you’re curious about advanced Jest features, or want to level up your JavaScript testing fundamentals (or just want to support Code with Hugo), this is for you: .

Hot off the press

Jest set, clear and reset mock/spy/stub implementation: 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).

If you missed it

Tailwind CSS 1.x impressions, development and production setup for static sites with Tailwind CLI and PurgeCSS CLI: Tailwind CSS is “a utility-first CSS framework for rapidly building custom designs”.

Hot off the press

Jest .fn() and .spyOn() spy/stub/mock assertion reference: Where other JavaScript testing libraries would lean on a specific stub/spy library like Sinon - Standalone test spies, stubs and mocks for JavaScript.

If you missed it

Hot off the press

Jest Array/Object partial match with objectContaining and arrayContaining: It’s possible to do partial matches on Arrays and Objects in Jest using expect.objectContaining and expect.arrayContaining.

I've got some free ebook review referral copies of Professional JavaScript still available, if you're interested and you're eligible (have spent $50 on Amazon in the past calendar year so you can leave a review), let me know by replying (hi@codewithhugo.com).

If you missed it

👋 Welcome to this week's newsletter where we discuss how to programmatically fail a test, why you would want to do so and more.

Hot off the press

Jest explicitly or arbitrarily force fail() a test: When testing code with Jest, it can sometimes be useful to fail a test arbitrarily.

If you missed it

Hot off the press

I've added a new section "Partial module mocking with jest.requireActual" to Jest Full and Partial Mock/Spy of CommonJS and ES6 Module Imports.

In this section, you'll be able to discern how to use jest.requireActual to do true partial mocking of a module in Jest.

The Code with Hugo September update is also out:

I'm working on an Advanced Jest Guide to save everyone time when faced with non-trivial Jest issues.

Jest is super powerful and has really nifty features that are underused which give you superpowers.

This is in addition to the book I've been co-authoring, "Professional JavaScript" being published with Packt. I've learnt a lot from that experience and hopefully I can put those new skills to good use in this project.

Hot off the press

Hot off the press

Auto-publish future posts with JAMstack on Netlify and IFTTT/CircleCI 2.0 scheduled jobs: Static site generators like Hugo, Jekyll, Hexo, Gatsby or other JAMstack alternative are a great option to run your blog on.

I love micro, but Express is just too ubiquitous at the moment.

Hot off the press

Performance improvements 👀

Hot off the press

Detect ctrl/CMD/alt/shift + Click in Vanilla JavaScript and React: Detecting control-click, command-click, alt-click and shift-click in JavaScript without listening to keydown events is straightforward.

In fun fails, I configured a healthcheck for an app to fetch the RSS feed of Code with Hugo every minute... leading to a bunch of uncached traffic.

To subscribe to the RSS feed it's at https://codewithhugo.com/index.xml

Hot off the press

Record analytics events with a Zeit “micro” + SQLite3 Node.js application: In order to finally switch off Google Analytics, I need to replace my goal conversion tracking somehow.

In Code with Hugo performance improvements this week. I got rid of Google Analytics. It’s just and my custom event recording service backed by SQLite.

Hot off the press

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

Recent work to leverage Hugo's asset pipeline for both resource bundling and image resizing has been successful. The outcomes are documented in the following thread, codewithhugo.com should now be snappier and less data-hungry (no 1500x1500 images used as thumbnails any more):

https://twitter.com/hugo__df/status/1167788478094041090

Hot off the press

Detect if the current file/module is the entrypoint or import/require-d in Node.js: 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).

Updated the on my page.

Hot off the press

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.

If you missed it

Hot off the press

Add Diagrams to your 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”.

You should also have a look at the .

Hot off the press

Yarn Workspaces: monorepo management without Lerna for applications and coding examples: How to use Yarn Workspaces to manage applications/coding examples.

Started work on a widget: “SponsorCost” available on . I’m scratching my own itch, I keep having to Google for reasonable prices for sponsorship, so that’s that.

Hot off the press

Jest Full and Partial Mock/Spy of CommonJS and ES6 Module Imports: The example repository is available at github.com/HugoDF/mock-spy-module-import.

New repos:

• github.com/HugoDF/yarn-workspaces-simple-monorepo: Yarn Workspaces basic monorepo management without Lerna for coding examples
• github.com/HugoDF/node-mit-boilerplate: Node.js starter files with MIT license, gitignore and XO linting, corresponding intro tweet:

Hot off the press

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

I’ve been toying with a new project, there’s prior art in the field (but was discontinued).