Trending Posts

Trending

Development Practices

Stop Pair Programming and Start Pair Exploring

Articles providing tips to pair program are ubiquitous. Instead, let's talk about pair exploring, including why and/or when to pair program.

Dylan Goings Accelerator Manager and Software Consultant. If you don't learn from history, you're doomed to rebase it.

Categories

Most Recent View more recent posts →

UX/Design Practices • Dec 05

How My Team is Retrofitting A11y into Our Software Project

The whole team is gaining more experience with identifying a11y issues and how to integrate accessible code into development going forward.

UX/Design Practices • Dec 04

Aesthetics and Usability in UX Design: 3 Common Mistakes to Avoid

The concept of good UX design applies to many parts of our lives: we want our clothing and our homes to look nice and have practical features.

Project & Team Management • Dec 03

When the Rookie Becomes the Vet: Soft Skills for First-Time Tech Leads

I’ll share key insights and essential strategies that will help you navigate the thrilling but challenging transition to tech lead seamlessly.

View more recent posts

Developer Tools View more Developer Tools posts →

Navigating the Differences Between MongoDB and AWS DocumentDB in Practice

Atomic Thinking, Developer Tools

Navigating the Differences Between MongoDB and AWS DocumentDB in Practice

read post

Developer Tools

Master the Zen of the Zod Brand

read post

Tools for Windows development

Developer Tools

Check Out These Neat Tools for Windows Development

read post

blender's node-based workflows

Developer Tools

Get Familiar with Blender’s Node-Based Workflows

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 →

Builder.io Impressions from a React Developer

React / Redux

Builder.io Impressions from a React Developer

Builder.io is fantastic for building custom websites, especially in teams with both technical and non-technical members.

Wire Up a Radio Button Using React Hook Form and Chakra UI

React / Redux

Wire Up a Radio Button Using React Hook Form and Chakra UI

Today, let's use the powerful combination of React Hook Form and Chakra UI libraries to wire up a radio button.

Grouped Stacked Bar Charts with Recharts: Unveiling Snacking Patterns

React / Redux

Grouped Stacked Bar Charts with Recharts: Unveiling Snacking Patterns

Learn how to create grouped stacked bar charts with Recharts. We'll walk through an example without any extra downloads or fancy CSS.

View more React / Redux posts

Web Apps View more Web Apps posts →

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

Common CSS Pitfalls and How to Avoid Them

Web Apps

Common CSS Pitfalls and How to Avoid Them

read post

Wait for Hydration in Automated SvelteKit Browser Tests

Web Apps

Wait for Hydration in Automated SvelteKit Browser Tests

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 →

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

Tailscale Takes All the "Fun" Out of VPNs

DevOps & System Admin.

Tailscale Takes All the “Fun” Out of VPNs

read post

How to Fix TypeError: Cannot Read Properties of Null (Reading 'createEvent')

DevOps & System Admin.

Using Your SSH Keys in WSL in 2022

read post

View more DevOps & System Admin posts

Extracurricular Activities View more Extracurricular Activities posts →

Run Unifi Network Application via LinuxServer.io’s Docker Image

Extracurricular Activities

How to Run Unifi Network Application via LinuxServer.io’s Docker Image

Unifi Networking Application is a great tool for managing your Unifi network. Learn how to run the application via LinuxServer.io's image.

Scrum Your Money: Create a Backlog. Laura is smiling because she just hit a big personal finance milestone.

Extracurricular Activities

Scrum Your Money, Part 3: Backlog

Answer a few important questions. From there, create a backlog to map out and prioritize the steps to get to your money goal.

Part 2: Money Transparency and Ceremonies, Like Daily Standups

Extracurricular Activities

Scrum Your Money, Part 2: Transparency and Ceremonies

In part two of this series, I'll cover the importance of money transparency and using sprint ceremonies to inspect your progress.

View more Extracurricular Activities posts

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

View more .NET / WPF posts

Personal Optimization View more Personal Optimization posts →

Tips for Successful Remote Work

Personal Optimization

Tips for Successful Remote Work

read post

How I Configured Doom Emacs as an Email Client

Personal Optimization

How I Configured Doom Emacs as an Email Client

read post

Miro as a personal organization tool

Personal Optimization

Miro is My DIY Task Management System

read post

Mastering the Art of Resolving Issues: A Communication Guide

Personal Optimization

Mastering the Art of Resolving Issues: A Communication Guide

read post

View more Personal Optimization posts

TypeScript View More TypeScript posts →

View More TypeScript posts

React Native View more React Native posts →

Resolve "Non-std C++ Exception"

React Native

Resolve “Non-std C++ Exception” in React Native with the “lsof” Command

React Native is powerful, but, like any technology a developer has to work through an occasional errors, such as the "Non-std C++ Exception".

Why I Recommend Adopting Expo Prebuild

React Native

Why I Recommend Adopting Expo Prebuild

Keith Kurak’s recent talk, "Not Your Grandparents’ Expo," motivated me to look into adopting prebuild on my current project.

Create a Hand-Drawing Component Using React Native Skia

React Native

Create a Hand-Drawing Component Using React Native Skia

While searching for the ideal library, I came across React Native Skia — a high-performance 2D graphics library.

View more React Native posts

Growing as Makers View more Growing as Makers posts →

Maximize Your Experience at Developer Conferences

Growing as Makers

Maximize Your Experience at Developer Conferences

read post

Atomic Con: The Value of Hosting an Internal Conference

Growing as Makers

Atomic Con: The Value of Hosting an Internal Conference

read post

Staying motivated when working on a difficult story.

Growing as Makers

Stay Motivated When Working on a Difficult Story

read post

Be a Better Mentee

Growing as Makers

Here’s How to Be a Better Mentee

read post

View more Growing as Makers posts

Atomic Thinking View more Atomic Thinking posts →

Healthy Workplace: Memes, Emojis, and Knowing Your Coworkers

Culture

Memes, Emojis, and Other Signs of a Healthy Workplace

We spend so much time with coworkers, and levity is how we get through the day. Let's look at some memes and discuss why that is.

(A Lack of) Curiosity Killed the Software Project

Culture

(A Lack of) Curiosity Killed the Software Project

A shift happening in software is steering teams away from acting with curiosity. Tools like AI and Figma have helped speed up the process.

Navigating the Differences Between MongoDB and AWS DocumentDB in Practice

Atomic Thinking, Developer Tools

Navigating the Differences Between MongoDB and AWS DocumentDB in Practice

I hit a few snags while developing against MongoDB locally and deploying to AWS DocumentDB. Here is what I discovered.

View more Atomic Thinking posts