Editor's Pick
How software engineers create value
Software engineers create value through shipping working code that solves a pain point for users in a predictable manner.
To create value as an engineer, you have to optimise for two things:
- Ship working code.
- The code you ship should either solve or help solve customer problems.
Many engineers ship features they’re told to ship without asking why or how the feature will solve or help solve a customer problem. If you ship code that doesn’t solve a problem or help solve a problem, you’re not creating value by shipping it.
CSS
CSS for printing to paper
This article explains some of the CSS basics that control how your webpages look when printed, and a couple of tips and tricks I've learned that might help you out.
Playing with Infinity in CSS
CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some practical use cases.
No promises, though.
CSS Grid full-bleed layout tutorial
Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is also one of the trickiest. In this tutorial, I break down how to build the "full-bleed" layout using CSS Grid.
HTML
Streaming HTML out of order without JavaScript
The concept of streaming HTML - sending HTML from a web server to a browser in chunks as it is generated - is nothing new. It seemed to take a back seat at the beginning of the age of modern front-end frameworks and Single Page Applications - where the entire page was generated in the browser - but as the pendulum swings back towards server-side rendering with full stack frameworks, streaming responses are becoming popular again.
Modern full stack frameworks enable this functionality by using a variety of clever techniques, all of which require buy-in to the particular framework and a hefty chunk of JavaScript. That might be fine for your use case, but what if we could achieve the same thing without any JavaScript or framework? Well now you can.
JavaScript
JSR: the JavaScript Registry
JSR is designed for TypeScript. You publish TypeScript source, and JSR handles generating API docs, .d.ts files, and transpiling your code for cross-runtime compatibility.
JSR packages are distributed as web-standard ECMAScript modules.
JSR isn't a replacement for the npm registry; it's a superset of npm.
JSR modules can be used with any JavaScript package manager, and in any project with a node_modules folder.
React Unforget
React Unforget is a project inspired by the principles of React Forget, designed to streamline and optimize React component rendering. The mission of React Unforget is to enhance the performance of React applications as well as developer experience by automating the memoization process, making it unnecessary to manually use useMemo or useCallback.
How to animate objects with Tailwind CSS and Alpinejs intersection observer
Today’s tutorial is about alpinejs Intersect plugin, a convenient wrapper for the Intersection Observer API, allowing you to easily react when an element enters the viewport. It’s fun, and easy to use.
Judicious JSON
JSON is a simple technology but has a lot of underlying topics to think about. This guide can help uncover those topics.
JavaScript Runs the World—Maybe Even Literally
Lex Fridman has done many long interviews on his popular podcast. Even so, the episode with the legendary programmer John Carmack has an unhinged director’s-cut feel to it. Over five hours, Carmack dishes on everything from vector operations to Doom. But it’s something Fridman says, offhand, that really justifies the extended run time: “I think that if we’re living in a simulation, it’s written in JavaScript.”
Offloading JavaScript With Custom Properties
Given CSS-based scroll-driven animations are still behind various flags, I set my client up with a small IntersectionObserver script. This tiny module, called CreateObserver, is imported into the foot of the page and initialized with a few arguments.
Mantra.js: A JavaScript game dev framework.
The Mantra.js file is currently under 111kb and will most likely get smaller. It's best to think of Mantra as the orchestrator for your game. You can import Mantra once and immediately begin adding new functionality dynamically.
Mantra lets you focus on game logic and design without worrying about the complexities of physics simulation and high-performance netcode.
The Modern JavaScript Tutorial
How it's done now. From the basics to advanced topics with simple, but detailed explanations.
Creating an Animated 3D Starfield Effect
Learn how to create this fun effect where we simulate us flying past endless stars in outer space.
Eloquent JavaScript 4th edition (2024)
This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
UX
Mantine UI - 123 responsive components built with Mantine
Build your next website even faster with premade responsive components designed and built by Mantine maintainers and community. All components are free forever for everyone.
Guiding Choices in UX: The Role and Ethics of Nudging
Nudging — have you heard of this subtle approach for guiding user behaviour? It's an influential technique that originated from behavioural economics and psychology. Nudging gently steers people towards beneficial choices, while maintaining freedom of choice. This article looks at the art of ethical nudging. We'll explore what it is, where it came from, and how it can be used to enhance user experiences when applied appropriately. Read on to learn how to use ethical nudges that positively shape user decisions.
Miscellaneous
How software engineers create value
Software engineers create value through shipping working code that solves a pain point for users in a predictable manner.
To create value as an engineer, you have to optimise for two things:
- Ship working code.
- The code you ship should either solve or help solve customer problems.
Many engineers ship features they’re told to ship without asking why or how the feature will solve or help solve a customer problem. If you ship code that doesn’t solve a problem or help solve a problem, you’re not creating value by shipping it.
Why the Frontend Kingmaker isn’t Full-Stack: A History
I have made the case that in 2024 frontend developers are the Newest New Kingmakers, and therefore deserve a place beside more established Kingmakers hailing from the backend and IT operations spheres. Evidence of the frontend’s rise is everywhere. Client-side interactivity and the UI is where much of the most exciting software innovation is happening.