Suppose your package.json specifies a Node engine of greater than or equal 24. Does this mean all engineers on your team will use Node 24? No, unless you use this one weird trick! Locally, the engines key of package.json is an advisory. To force developers to use the same Node version, you can set the engine-strict flag. When true, such as through an .npmrc: # .npmrc engine-strict=true You’ll get a nice error like this when you aren’t using a compatible Node: ...
Want to learn a tricky topic and sharpen your learning skills at the same time? In this post, I’ll use the Feynman Learning Technique— a method of learning complex things by explaining them simply— with a sprinkle of LLM magic, to deepen my understanding of JavaScript promises. What is the Feynman Learning Technique? The Feynman Learning Technique is a learning method defined by Nobel laureate physicist and bongo drummer Richard Feynman. My perception is that it’s been pieced together from things that Dr. Feynman said over time. ...
The Node REPL has its own editor: node > .editor // Entering editor mode (Ctrl+D to finish, Ctrl+C to cancel) const increment = (array) => array.map(item => item + 1) increment([1,2,3]) Exit and evaluate with Ctrl+D: [ 2, 3, 4 ] I’d use this to experiment with JavaScript API’s without leaving my terminal-based IDE.
I’ve added TypeScript to several projects I’ve worked on. In this post, I’d like to discuss why I think TypeScript is essential and document my expectations around it. What Is TypeScript? TypeScript is a type-safe superset of JavaScript developed by Microsoft. JavaScript is a dynamic language and doesn’t have type-safety. But with TypeScript, it does! It’s also a gradual type system, so one file in a codebase can be converted from .js to .ts, and with a server or process restart, type-checking is performed on that file. ...
Exploring your JS dependencies locally is a great way to learn and experiment. Here’s how to load a dependency from your /node_modules directory into the Node REPL. $ node > cn = require('classnames') > cn("always", { never: false, sometimes: true }) 'always sometimes'
Absolute imports are an essential developer experience feature for me in any JavaScript application. In this post, I’ll explain what they are, how to use them, and why they matter. What Is An Absolute Import? It’s easier to think of an absolute import in contrast to a relative import, which looks like this: import { Page } from '../../views/pages/Page'; Translating this code into words: “Bring in the named export Page, which can be found ‘up’ two directories and then inside the views/pages directory.” ...
Today in “Let JavaScript Surprise You”: let array = [1, 20, 11, 10, 7, 17, 2]; console.log(array.sort()); > [1, 10, 11, 17, 2, 20, 7] 😳 The numbers are not sorted as we might expect. What’s going on here? From Mozilla’s docs: The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. Now this sorting makes sense! Luckily, sort accepts a function, so here’s the sorting we intended: const sortNumbers = (first, second) => first - second console.log(array.sort(sortNumbers)) > [1, 2, 7, 10, 11, 17, 20]
Have you ever wanted to create a timer in a React app? This could be in support of a UI timer or polling. In this post, I’ll explain how to create a timer effect in a React application using hooks and setInterval. Let’s get right to the code. Below, I’ll explain what every line is doing. import * as React from "react"; import { useState } from "react"; const App = () => { const [timer, setTimer] = useState(); const toggleTimer = () => { if (timer) { clearInterval(timer); setTimer(undefined); } else { const timerId = setInterval(() => console.log("tick"), 1000); setTimer(timerId); } }; return <button onClick={toggleTimer}>{timer ? "Stop" : "Start"}</button>; }; export default App; Here’s the summary: this code creates a button that reads “Start”. On click, that changes to “Stop”, creating a timer with setInterval ticking once per second. This tick behavior could represent anything, including: ...
Have you ever wanted to take a JavaScript array of strings and turn them into a sentence? Here’s how you do that. const toLearn = [ 'object-oriented programming', 'frontend engineering', 'testing', ] const sentence = new Intl.ListFormat().format(toLearn) > "object-oriented programming, frontend engineering, and testing" ListFormat takes options. This has cross-browser support! The days of building a ’to sentence’ function in JavaScript are over.
When printing a JavaScript value to the console, I suggest using an object literal over the raw value. // Okay console.log(response) // Better console.log({ response }) It’s a little thing that over time has a big benefit. In this post, I’ll explain this technique and describe why I find it useful. First Iteration: The Raw Value Imagine you have a value assigned to the variable response, and you want to know its value. Here’s how you might print it to the console, with console.log. ...