Trending Posts

Trending

Artificial Intelligence

Embrace Cortisol with Anxiety Coding

In essence, Anxiety Coding is the practice of embracing your cortisol‑fueled skepticism—writing tests before accepting any AI‑generated draft.

Ben Zuke Sports, Disc Golf, and Lego nerd that develops custom software at Atomic Object

Categories

Most Recent View more recent posts →

Angular • Jun 03

Work with Multiple Observables in Angular’s ngOnInit

On a software project that involves building an Angular component? Learn about working with multiple observables in Angular's ngOnInit.

The Software Life • Jun 02

Preview Environments with Neon’s Database Branching

Neon DB solves problems with database branching. A fresh database instance is provisioned, based on the latest state of its parent database.

The Software Life • Jun 01

Advice for Consultants: Best Practices for Short Engagements

As a software consultant, I've learned a few lessons about delivering immediate value and building trust during short engagements.

View more recent posts

ChatGPT View more ChatGPT posts →

Generate CTEs for a Legacy Database Using an LLM

ChatGPT

Generate CTEs for a Legacy Database Using an LLM

read post

ChatGPT

Prompt Writing Basics: An Intro to GPTs for Non-Developers

read post

Porting Elmish to Typescript: A Conversation with ChatGPT

ChatGPT

Port Elmish to Typescript: A Conversation with ChatGPT

read post

Stuck? Benefits of Pair Programming vs. Using an AI Assistant

ChatGPT

Stuck? Benefits of Pair Programming vs. Using an AI Assistant

read post

View more ChatGPT posts

Developer Tools View more Developer Tools posts →

Tools That Let Me Spend More Time Coding, Less Time Clicking

Developer Tools

Tools That Let Me Spend More Time Coding, Less Time Clicking

read post

Blog post author Michael Li is pictured discussing with fellow developers: A Guide to Browser DevTools - The Console

Developer Tools

A Guide to Browser DevTools – The Console

read post

Author Doug Shipp is pictured, discussing "Cursor Tips I Learned from Vibe Coders: A Guide to AI-Powered Development"

Developer Tools

Cursor Tips I Learned from Vibe Coders: A Guide to AI-Powered Development

read post

A screen reading: "Permission Denied" Error: Fixing Azure Docker Containers

Developer Tools

“Permission Denied” Error: Fixing Azure Docker Containers

read post

View more Developer Tools posts

UX/Design Tools View more UX/Design Tools posts →

View more UX/Design Tools posts

React / Redux View more React / Redux posts →

Use React Hook Form with Zod Validation: Part One

React / Redux

Use React Hook Form with Zod Validation: Part One

React Hook Form is a library that smoothly handles forms in React. Let's look at examples of how to use React Hook Form with Zod validation.

Improve Asynchronous State UX in React with useOptimistic

React / Redux

Improve Asynchronous State UX in React with useOptimistic

React 19’s useOptimistic hook helps reduces annoyances by providing a built-in hook for Optimistic Updates.

Decide Between Server and Client Components

React / Redux

The Only Question to Ask Yourself to Decide Between Server and Client Components

Can't decide between server components and client components in React? Here's one question to ask yourself to pick correctly.

View more React / Redux posts

Web Apps View more Web Apps posts →

How to Build and Publish Browser Extensions for Chrome, Firefox, and Safari

Web Apps

How to Build and Publish Browser Extensions for Chrome, Firefox, and Safari

read post

Embedding Payload CMS 3.0 Admin UI in Your Next.js App

Web Apps

Embed Payload CMS 3.0 Admin UI in Your Next.js App

read post

About a year ago, I used Remix on a short prototype app to that displayed a series of reports and I loved it. For those who don’t know. Remix is a framework for building websites. It uses React JS as a base and adds some specialized compiling. The app was a great use case for Remix for a few reasons. First, the pre-built stacks got the app deployed quickly. The main parts of Remix that shined were its prefetching, directory-based routing, and its loader functions. The prefetching helped the reports load faster because some data would be retrieved before the user navigated. The directory-based routing made it easy to setup the structure of the app. Last, Remix’s loader functions were able to retrieve small amounts of data each as it was needed. I am now using Remix on a second website that has a different structure than the prototype and we aren’t able to use the same features to the same degree. This time around, I am finding myself using fewer of the features mentioned previously. We aren’t using perfecting because we have a single page with a lot of complexity. We have fewer loader functions retrieving lots of information at once which makes them perform worse. The main difference that I found between the two projects is that the prototype was a multipage app and the second has been turning into a single page app (SPA). Based on Remix's documentation and my experience the best use cases for Remix are ones that can be modeled as multiple pages. Challenges for single page apps For this post, when I refer to a single page app I am referring to an app that tries to pack a variety of behaviors onto a single route. An example would be Google Calendar. Pictured below: In order to render this page, we need to load a few different things. We need to load all the events for this month, all the calendars for the user, and the details for the apps along the lefthand side. Then to use the app, we need to track which event is selected. When the user drags an event, we need to keep track of the calendar it is on. Then when it is placed, an alert is displayed if there are any conflicts. This state and behavior may need to be done in one component, which means one loader function. We may also want to perform component tests which are only partially supported in Remix, based on this git conversation. Make it optimal Instead, let’s talk about structuring an app to leverage Remix’s strengths. I am assuming we want to make use of Remix’s speedy loading while getting around some of its component testing limitations.The files that are used for routing should each be responsible for retrieving, displaying and mutating a limited set of information. As an example of a UI structure that could work well in Remix let’s look at Slack. Slack's UI can be visually broken down into three sections. The workspaces are on the far left. Then the channels within the selected workspace are listed, and lastly, we have the current chat for the selected workspace. A Remix app with this UI could have a URL like: slack/workspace2/proj-new-website. The root of the app would get the list of all workspaces, then /workspace2 would load the details for the selected workspace. Lastly, the chat window for /proj-new-website would load the chats and display them. This app can be modeled as a multipage app because the responsibilities are spread at different levels of the page instead of being concentrated in one component, like with the Google Calendar example. This would be a Slack-like app, and a better use case for Remix than a calendar app. Use the right tool for the job Remix is a powerful tool for web development. It can produce polished prototypes quickly and can build performant production apps. However, an app in Remix needs to keep Remix's design principles in mind. This means splitting the app's pages into pieces that can be loaded and rendered separately and keeping components as simple as possible in order to limit component testing on the frontend. Designing an app this way will enable the app to leverage the performance benefits promised by Remix.

Web Apps

Remix is Incredible — If It Fits Your Use Case

read post

Vercel: A Valuable Debugging Tool

Web Apps

Vercel: A Valuable Debugging Tool

read post

View more Web Apps posts

Development Practices View more Development Practices posts →

View more Development Practices posts

DevOps & System Admin View more DevOps & System Admin posts →

Hot Reloading Kubernetes with Skaffold

DevOps & System Admin.

How to Hot Reload Kubernetes with Skaffold

read post

Docker Compose Dependency Management Isn't a Silver Bullet

DevOps & System Admin.

Docker Compose Dependency Management Isn’t a Silver Bullet

read post

Working with Docker Containers Made Easy with the dexec Bash Script

DevOps & System Admin.

Working with Docker Containers Made Easy with the dexec Bash Script

read post

How and Why You Should Add Color to Your Scripts

DevOps & System Admin.

How and Why You Should Add Color to Your Scripts

read post

View more DevOps & System Admin posts

Extracurricular Activities View more Extracurricular Activities posts →

A screenshot of the homepage app, illustrating a blog post titled How to Run the Homepage App Via Its Docker Image

Extracurricular Activities

How to Run the Homepage App Via Its Docker Image

Here's how I run the Homepage application as part of my home lab. It's another service running as part of a Docker Compose environment.

Extracurricular Activities

Bringing Your Raspberry Pi on the Road: A Portable Pi Setup Guide

With this Portable Pi Guide, you'll make your Raspberry Pi travel-ready using Tailscale and your phone’s hotspot — no extra gear needed.

Build a Joke-Telling Chatbot with LangGraph and Streamlit

Extracurricular Activities

Build a Joke-Telling Chatbot with LangGraph and Streamlit

Let's explore how to build an interactive joke-telling chatbot - including a setup and punchline - using LangGraph, LangChain, and Streamlit.

View more Extracurricular Activities posts

.NET / WPF View more .NET / WPF posts →

View more .NET / WPF posts

Personal Optimization View more Personal Optimization posts →

An example of a Priority List made with Apple Reminders

Personal Optimization

Why I Use Apple Reminders (and Keep Coming Back to It)

read post

Context-Aware Shell Aliases: One Shortcut, Many Projects

Personal Optimization

Context-Aware Shell Aliases: One Shortcut, Many Projects

read post

Embrace Your Talk-to-Think Communication Style at Work

Personal Optimization

Embrace Your Talk-to-Think Communication Style at Work

read post

You Don’t Know Everything and That Is Ok

Personal Optimization

You Don’t Know Everything, and That Is Okay

read post

View more Personal Optimization posts

TypeScript View More TypeScript posts →

View More TypeScript posts

React Native View more React Native posts →

Don't Reinvent the Wheel or the Modal. Use React Native Reusables Instead.

React Native

Don’t Reinvent the Wheel or the Modal. Use React Native Reusables Instead.

React Native Reusables is a toolkit that lets you instantly add pre-built, customizable, and time-tested components to your React Native app.

How to Style MUI Line Chart Components

React Native

How to Style MUI Line Chart Components

Styling an MUI component can be challenging. This guide shows ways to customize the LineChart component to achieve your desired look.

Embrace App Monitors: A Solution for State Changes in React Native

React Native

Embrace App Monitors: A Solution for State Changes in React Native

Let's look at why relying solely on useEffect might make your code a bit of a puzzle and how App Monitors can alleviate this issue.

View more React Native posts

Growing as Makers View more Growing as Makers posts →

Author Sam Laidlaw laughs with coworkers, illustrating a post titled What Makes a Great Consultant? Hint: It’s Not Just Code

Growing as Makers

What Makes a Great Consultant? Hint: It’s Not Just Code

read post

Post author Laura Corona laughs and claps with co-workers. This illustrates the post titled: People First: My Shift Toward More Meaningful Work

Growing as Makers

People First: My Shift Toward More Meaningful Work

read post

Several Atomic members playing rock and roll, illustrating the post titled Play More: Creating Community with Your Existing Office Network

Growing as Makers

Play More: Creating Community with Your Existing Office Network

read post

Pictured is a hand with a pen writing in a notebook, illustrating a point "Retake Your Pen" from the article Crucial Conversations: In the Heat of It

Growing as Makers

Crucial Conversations: In the Heat of it – What to Keep in Mind When Dialogue Isn’t Easy

read post

View more Growing as Makers posts

Atomic Thinking View more Atomic Thinking posts →

Pictured is author Sivhaun Sera. Post title: Working with Multiple Observables in Angular's ngOnInit

Angular

Work with Multiple Observables in Angular’s ngOnInit

On a software project that involves building an Angular component? Learn about working with multiple observables in Angular's ngOnInit.

Pictured is author John Ruble with his co-workers. Post title: Preview Environments with Neon's Database Branching

The Software Life

Preview Environments with Neon’s Database Branching

Neon DB solves problems with database branching. A fresh database instance is provisioned, based on the latest state of its parent database.

Pictured is author Ty Swanson at his computer. Post title: Advice for Consultants: Best Practices for Short Engagements

The Software Life

Advice for Consultants: Best Practices for Short Engagements

As a software consultant, I've learned a few lessons about delivering immediate value and building trust during short engagements.

View more Atomic Thinking posts