Trending Posts

Trending

Culture

Atomic Object: Proud to Be a B Corp

If you have been looking for the bat-signal of companies oriented for impact in their work, people, and locale, look for a B Corp.

Taylor Vanden Hoek Managing Partner at Atomic Object, Raleigh. Designer for life. Passionate about creating digital experiences that contribute to positive outcomes.

Categories

Most Recent View more recent posts →

Developer Tools • Apr 15

Keep It Simple with Camera Intents in Your Jetpack Compose App

The simplest way to take photos in android is to use Camera Intents to launch the system camera application.

Evolving the Industry • Apr 14

From COBOL to the Cloud? Lessons from Individual Master File, the Massive Software Modernization Project

The IRS relies on the ancient Individual Master File (IMF) program, despite billions of dollars and several failed attempts to modernize.

Product Development • Apr 13

The Double-Edged Sword of Collaboration: How to Avoid the Pitfalls of Decision Paralysis

I'm all for collaboration, but let’s talk about the limits of collaboration and how to avoid decision paralysis.

View more recent posts

Developer Tools View more Developer Tools posts →

Keeping It Simple with Camera Intents in Your Jetpack Compose App

Developer Tools

Keep It Simple with Camera Intents in Your Jetpack Compose App

read post

Developer Tools

Reconsider Using Storybook: Is It Worth the Hassle?

read post

When to Use PUT and When to Use PATCH

Developer Tools

When to Use PUT and When to Use PATCH

read post

3 Features of Modern CSS You Should Know About

Developer Tools

3 Features of Modern CSS You Should Know About

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 →

The Reactor's Dilemma: Transitioning from React to Vue

React / Redux

The Reactor’s Dilemma: Transitioning from React to Vue

Transitioning from React to Vue is like switching from a bike to an electric scooter – a zippier ride, but you must get used to the controls.

React / Redux

10 Lessons Learned from 4 Weeks of Updating Bootstrap

Another developer and I spent about 345 hours updating the Bootstrap and React Bootstrap versions on two web apps. Here's what I learned.

Don't always depend on useEffect

React / Redux

Don’t Always Depend on useEffect

When you use React, don't always depend on useEffect. Instead, try useMemo or useCallback to avoid infinite re-rendering.

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 →

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

Tailscale Takes All the "Fun" Out of VPNs

DevOps & System Admin.

Tailscale Takes All the “Fun” Out of VPNs

read post

View more DevOps & System Admin posts

Extracurricular Activities View more Extracurricular Activities posts →

Tips for Taking an Effective Vacation

Extracurricular Activities

Tips for Taking an Effective Vacation

I'll explore the art of taking time off and how you can both enjoy your vacation and return to work recharged and more productive than ever.

Extracurricular Activities

Keep an Eye on Container Status with lazydocker

I appreciate how lazydocker lets me visualize container status. It makes something inherently very boring much more interesting.

Blender Geometry Nodes

Extracurricular Activities

Takeaways from Making a Music Video with Geometry Nodes

Here, learn the most important steps if you'd like to make a music video using Blender Geometry Nodes.

View more Extracurricular Activities posts

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

View more .NET / WPF posts

Personal Optimization View more Personal Optimization posts →

Not Just Another Programming Language: Skills That Make a Difference

Personal Optimization

Not Just Another Programming Language: Skills That Make a Difference

read post

How to Automatically Track Your Work Hours Using IFTTT

Personal Optimization

How to Automatically Track Your Work Hours Using IFTTT

read post

Snowball or avalanche?

Personal Optimization

Snowball or Avalanche? Task Management Takes a Cue from Personal Finance

read post

Boosting Productivity: Exploring Handy Keyboard Shortcuts for Developers in VS Code

Personal Optimization

Boost Productivity: Handy VS Code Keyboard Shortcuts for Developers

read post

View more Personal Optimization posts

TypeScript View More TypeScript posts →

View More TypeScript posts

React Native View more React Native posts →

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.

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.

View more React Native posts

Growing as Makers View more Growing as Makers posts →

Don't Let Perfectionism Stall Your Software Development Project

Growing as Makers

Don’t Let Perfectionism Stall Your Software Development Project

read post

Ask These 10 Questions in a Job Interview When Your Top Priority is to Career Growth

Growing as Makers

Ask These 10 Questions in a Job Interview When Your Top Priority is to Advance Your Career Quickly

read post

Thoughts for a Pre-Career Me

Growing as Makers

Checkpoints and Mastery: Thoughts on My Post-College Career

read post

Try These 2 Games to Make Learning Programming Fun

Growing as Makers

Try These 2 Games to Make Learning Programming Fun

read post

View more Growing as Makers posts

Atomic Thinking View more Atomic Thinking posts →

Group of software makers collaborating around a whiteboard

Product Development

The Double-Edged Sword of Collaboration: How to Avoid the Pitfalls of Decision Paralysis

I'm all for collaboration, but let’s talk about the limits of collaboration and how to avoid decision paralysis.

7 Reasons Why You Shouldn’t Work at Atomic

Culture

7 Reasons Why You Shouldn’t Work at Atomic

Recently, I wrote about Why I Love Working at Atomic, but here are a few reasons you might not want to work at Atomic.

The Do's and Don'ts of a Project Refactor

Technical Practices

The Do’s and Don’ts of a Project Refactor

Discover essential Do's and Don'ts for a successful project refactor. Ensure your project's overhaul is efficient with these tips

View more Atomic Thinking posts