Trending Posts

Trending

Growing as Makers

Hacking With The Homies: People Like Us

Despite what some people may say, coding is for everyone. Let's go Hacking With The Homies, and move toward being examples for ourselves.

Sulaiman Bah Atomic Accelerator. Computers have probably been the biggest focus in my life for the better part of a decade and a half. Always picking up new things, and always willing to speak on what I've learned.

Categories

Most Recent View more recent posts →

Growing as Makers • Nov 06

Learn to Trust Your Instincts as a New Developer

Feeling frustrated as a new developer? It’s actually a good sign! Learn how trusting your instincts as a new developer helps you grow faster.

GitHub Actions • Nov 05

Test a Server with Docker Compose on Github Actions

Learn to set up a GitHub Actions workflow that automates building your bot, running the server and both bots using Docker Compose.

Project & Team Management • Nov 04

Is the Backlog Getting Too Big? Here’s What to Cut!

Backlog getting out of control? Try these tips for cleaning up the product backlog so product teams can move quickly and efficiently.

View more recent posts

Developer Tools View more Developer Tools posts →

Developer Tools

Dependency Cruiser: Restrict Imports in JavaScript

read post

Why I Prefer WebStorm Over Visual Studio Code for Web Development

Developer Tools

Why I Prefer WebStorm Over Visual Studio Code for Web Development

read post

Developer Tools

4 Tips for Software Testing with Playwright

read post

Change the Internet, Part 2: Chrome Extension Custom Styling

Developer Tools

Change the Internet, Part 2: Extend Your Chrome Extension

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 →

Will server actions and components replace route handlers in NextJS?

React / Redux

Will Server Actions and Components Replace Route Handlers in NextJS?

With NextJS 13, along came server components and server actions. Are they an effective replacement for route handlers in Next altogether?

TanStack Query (Formerly React Query): The Basics

React / Redux

TanStack Query (Formerly React Query): The Basics

Let's walk through the fundamentals of TanStack Query, including queries, mutations, and query invalidation, and provide practical examples.

Tips for Using React Testing Library to Write Unit Tests

React / Redux

Tips for Using React Testing Library to Write Unit Tests

These are my top tips for anyone using the React Testing Library package for their unit tests. I hope they help you avoid major pain points.

View more React / Redux posts

Web Apps View more Web Apps posts →

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

Common CSS Pitfalls and How to Avoid Them

Web Apps

Common CSS Pitfalls and How to Avoid Them

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 →

From Zero to Unraid: The Perfect Home Server OS

Extracurricular Activities

From Zero to Unraid: The Perfect Home Server OS

When you're building a home server, choosing the right operating system can feel overwhelming. My choice? Unraid.

Adding a new LVM Thin pool to Proxmox (mostly) by hand

Extracurricular Activities

Add a New LVM Thin Pool to Proxmox (Mostly) by Hand

Add a new LVM Thin pool, based on multiple disks, as a Proxmox storage.

Extracurricular Activities

Home Automation in 2024: What’s New?

After avoiding it for a decade or so, I’m finally dipping my toes into home automation. So, what's changed, and why now?

View more Extracurricular Activities posts

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

View more .NET / WPF posts

Personal Optimization View more Personal Optimization posts →

Trying to Land Your First Job In Tech Post-Grad? 3 Things Not to Do

Personal Optimization

Trying to Land Your First Job In Tech Post-Grad? 3 Things Not to Do

read post

How To Be a Good Internal Consultant

Personal Optimization

How To Be a Good Internal Consultant

read post

Kids Playing Soccer

Personal Optimization

Transferring Athletic Skills to Professional Success: Lessons from the Soccer Field

read post

Create a Great Workflow for Blog Posts with Asciidoctor

Personal Optimization

Create a Great Workflow for Blog Posts with Asciidoctor

read post

View more Personal Optimization posts

TypeScript View More TypeScript posts →

View More TypeScript posts

React Native View more React Native posts →

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.

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".

View more React Native posts

Growing as Makers View more Growing as Makers posts →

Learn to Trust Your Instincts as a New Developer

Growing as Makers

Learn to Trust Your Instincts as a New Developer

read post

Use Community Forums (like Discord) to Launch Your Professional Knowledge and Career!

Growing as Makers

Use Community Forums to Launch Your Professional Knowledge and Career

read post

Leading When You Aren't The Leader

Growing as Makers

Leading When You Aren’t the Leader

read post

Hacking With The Homies: People Like Us

Growing as Makers

Hacking With The Homies: People Like Us

read post

View more Growing as Makers posts

Atomic Thinking View more Atomic Thinking posts →

Protons at Atomic - Ways to Build an Engaged Team Culture

Culture

Peer Recognition: 3 Ways to Reignite Engagement and Build Team Culture

When fewer people feel engaged, teams feel more disconnected and less effective. Here are 3 ways to bring back the sense of community.

The Power of Peer Recognition: Why It Matters and How It Fuels Team Success

Culture

Peer Recognition: Why It Matters and How It Fuels Team Success

I love that all avenues for peer recognition offer to meet Atoms where they're at regarding how they like to give and receive appreciation.

Atomic encourages self-expression at work, as in this Sugar Cube wall where co-workers share appreciation for one another.

Culture

Why Self-Expression at Work Matters: From Desk Plushies to Tattoos

Atoms dress themselves and their desks in ways that reflect their unique identities. Here's why self-expression at work is important.

View more Atomic Thinking posts